<template>
    <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">秒贷后台流程审批</h3>
        <el-form-item prop="username">
            <el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
            <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="logining">登录</el-button>
            <p style="font-size:14px;color:red" v-show="LoginError">{{errorMessage}}</p>
        </el-form-item>
    </el-form>
</template>
<script>
// import NProgress from 'nprogress'
export default {
  data () {
    return {
      logining: false,
      LoginError: false,
      errorMessage: '账号/密码错误！',
      account: {
        username: '',
        pwd: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
          // { validator: validaePass }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
          // { validator: validaePass2 }
        ]
      },
      checked: true
    }
  },
  methods: {
    handleLogin () {
      this.$refs.AccountFrom.validate(valid => {
        if (valid) {
          this.logining = true
          var that = this
          console.log(this.account.username)
        //   var loginParams = {
        //     username: this.account.username,
        //     password: this.account.pwd
        //   }
          var formData = new FormData()
          formData.append('username', this.account.username)
          formData.append('password', this.account.pwd)

          sessionStorage.setItem(
            'access-user',
            JSON.stringify(this.account.username)
          )
          that.$router.push({ path: '/' })

          // this.$http.post("/login", formData)
          //     .then((response) => {
          //         console.log(response.data);
          //         if (response.data.success == true) {
          //             this.$store.state.token = response.headers['x-auth-token'];
          //             this.$store.state.power = response.data.data.roleList[0].roleCode;
          //             sessionStorage.setItem('access-user', JSON.stringify(this.account.username));
          //             sessionStorage.setItem('token', response.headers['x-auth-token']);
          //             sessionStorage.setItem('power', response.data.data.roleList[0].roleCode);
          //             sessionStorage.setItem('staffId', response.data.data.staffId);
          //             sessionStorage.setItem('userName',response.data.data.staffName)
          //             var temp = []
          //             this.$store.state.menuList=response.data.data.funcList
          //             $.each(response.data.data.funcList,function(index,value){
          //                 if(value.menuUrl!=null&value.menuUrl!=''){
          //                     temp.push(value.menuUrl)
          //                 }
          //             })
          //             sessionStorage.setItem('menuList', temp.toString())
          //             if(response.data.data.roleList[0].roleCode=="ROLE_COOPERATIVE"){
          //                 that.$router.push({ path: '/syntheticalInput' })
          //             }else{
          //                 that.$router.push({ path: temp[0] });
          //             }
          //         } else {
          //             that.LoginError = true;
          //         }
          //     }).catch(function(response) {
          //         that.LoginError = true;
          //         console.log(response);
          //     });
          this.logining = false
        }
      })
    }
  }
}
</script>
<style>
body {
  background: #ffffff;
}
</style>
<style lang="scss" scoped>
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 160px auto;
  width: 350px;
  padding: 35px 35px 35px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

  background: -ms-linear-gradient(top, #fff, #6495ed);
  /* IE 10 */
  background: -moz-linear-gradient(top, #b8c4cb, #f6f6f8);
  /*火狐*/
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#b8c4cb),
    to(#f6f6f8)
  );
  /*谷歌*/
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#6495ed));
  /* Safari 4-5, Chrome 1-9*/
  background: -webkit-linear-gradient(top, #fff, #6495ed, #fff);
  /*Safari5.1 Chrome 10+*/
  background: -o-linear-gradient(top, #fff, #6495ed);
  /*Opera 11.10+*/
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
}
</style>
